Checks and radios

Create consistent, cross-browser and cross-device checkboxes and radio buttons using the completely redesigned checks component in Astral.CSS.

Checkboxes

Default checkbox



Checked checkbox

Disabled Checkbox

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled checkbox



Disabled checked checkbox

Radios

Default radio



Default checked radio

Disbaled Radio

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

  
  Disabled radio
  
  
  

  
  Disabled checked radio
  
  

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.

Default switch checkbox input



Checked switch checkbox input

Disabled Switch

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled switch checkbox input



Disabled checked switch checkbox input